<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--
        lodash库
            一款高性能的JavaScript实用工具库，它提供了大量数组、对象、字符串等操作方法，使开发者可以更加简单地使用JavaScript。
            其中提供了：
                throttle函数用于方法调用限制（点击执行函数功能后，间隔多长时间才可以点击执行，在这个间隔时间内点击多少次都不会执行功能）
                debounce函数用于方法调用防抖（不管怎么点击最终的点击会在延迟指定时间后执行）
     -->
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="click">按钮</button>

        <!-- 使用lodash限流防抖 -->
        <button @click="throttleClick">lodash限流按钮</button>

        <button @click="debounceClick">lodash防抖按钮</button>
    </div>

<script>
    const {createApp, ref} = Vue
    let throttle = false
    // 定义一个限流函数,指定时间间隔内只能触发一次回调
    function throttleTool(callback,timeout) {
        // 根据控制变量判断是否可以执行业务逻辑
        if(!throttle) {
            callback()
        } else {
            return
        }
        // 修改控制变理
        throttle = true
        // 延时恢复控制变理，实际上只是从时间间隔上控制限流的程度
        setTimeout(() => {
            throttle = false
        },timeout)
    }

    const config = {
        setup() {
            const click = () => {
                throttleTool(() => {
                    console.log(Date())
                },2000)
            }

            const throttleClick = _.throttle(() => {
                console.log(Date())
            },2000)

            const debounceClick = _.debounce(() => {
                console.log(Date())
            },2000)

            return {click,throttleClick,debounceClick}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>